<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级vue案例库</title>
</head>

<body>



<div id="app">
    <!--路由-->
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/">首页</router-link>
        <router-link to="/student">会员管理</router-link>
        <router-link to="/teacher">讲师管理</router-link>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </p>
<!--局部组件-->
    <Navbar></Navbar>
</div>

<script src="vue.js"></script>
<!--引入组件库-->
<!--<script src="component/Navbar.js"></script>-->
<script>
    var app = new Vue({
        el: '#app',
        // 定义局部组件，这里可以定义多个局部组件
        components: {
            //组件的名字
            'Navbar': {
                //组件的内容
                template: '<ul><li>首页</li><li>学员管理</li></ul>'
            }
        }
    })
</script>
<script>
<!--定义路由规则-->
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }


// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
    { path: '/', redirect: '/welcome' }, //设置默认指向的路径
    { path: '/welcome', component: Welcome },
    { path: '/student', component: Student },
    { path: '/teacher', component: Teacher }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
    el: '#app',
    router
})

</script>

</body>
</html>